<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@ page import="com.fengke.portal.config.HostConfig" %>
<%
	HostConfig hostConfig = (HostConfig) request.getSession().getServletContext().getAttribute("hostConfig");
%>
<!DOCTYPE html>
	<head>
		<base href="<%=hostConfig.getPortalHost() %>" />
		<title><%=hostConfig.getWebSiteName() %></title>
		<meta name="keywords" content="<%=hostConfig.getWebSiteName() %>" />
		<meta name="description" content="<%=hostConfig.getWebSiteName() %>" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="decorator" content="modMobile" />
		<link href="resources/travel/weixin/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="resources/travel/weixin/css/bootstrap-theme.css" rel="stylesheet" media="screen" />
<link href="resources/travel/weixin/css/font-awesome.min.css" rel="stylesheet" media="screen" />
<link href="resources/travel/weixin/css/image.css" rel="stylesheet" media="screen" />
<link href="resources/travel/weixin/css/travel.css" rel="stylesheet" media="screen" />

<script src="resources/travel/weixin/js/jquery.min.js"></script>
<script src="resources/travel/weixin/js/bootstrap.min.js"></script>

<script src="resources/travel/weixin/js/application.js"></script>
<script src="resources/travel/weixin/js/scrollpagination.js"></script>
<script type="text/javascript" src="resources/shop/js/jquery.lazyload.js"></script>

<style>
a:hover {
	text-decoration: none;
}

a:link {
	text-decoration: none;
}
li{list-style:none}
#indexContent dt.dt_product_name {
	display:block;width:100%;text-align:left; color: RGB(68,65,56);
}
#indexContent dt.dt_product_startingDate {
	display:block;width: 100%;text-align: left;color: RGB(106,103,94);font-size: 0.7em;
}
#indexContent dt.dt_product_startAddress {
	display:block;width: 100%;text-align: left;font-size: 0.7em;
}
#indexContent dt.dt_product_tag {
	display:block;width: 100%;text-align: left;font-size: 0.7em; margin-top: 3px;
}
#indexContent dt.dt_product_price {
	display:block;width:100%;text-align:right;color: RGB(249,123,0);font-size: 1.2em;z-index: 2;position: relative;margin-top: -20px;bottom: 0px;
}
.front_image_tag {
	position: absolute; padding: 2px; border-radius: 4px; background: rgb(255, 102, 0) none repeat scroll 0px 0px; color: rgb(255, 236, 178); margin: 3px 20px 3px 0px;
}
.desc_tag {
	background: RGB(115, 190, 255); color: white; padding: 2px 5px; margin-right: 5px; border-radius: 3px;
}
</style>
	</head>
<body>
	<div class="container" >
		<div class="row" style="display: none">
			<div class="pullup col-xs-12 col-sm-12 padding_0">
				<span></span>
			</div>
		</div>
		<!-- <div class="row">
    <div class="col-xs-12 col-sm-12 padding_0" style="display:block"> <a href="#" class="banner"><img src="images/banner.jpg" class="img-responsive" ></a> </div>
  </div>-->
		<div class="row">
			<div class=" col-xs-12 col-sm-12 padding_0 top_point clearfixd"
				style="display: none">
				<i>本产品由PL提供</i>
			</div>
		</div>
		<div class="row" style="display: block">
			<div class="col-xs-12 col-sm-12 padding_0">
				<div class="nav_group travel_nav  clearfixd">
					<!--clearfixd在顶部-->
					<nav class="clearfix list_group" style="padding: 10px 0px; font-weight: bold;">
						<a id="theme" data-value="" data-title="产品类型" data-type="theme" href="javascript:;" class=" col-xs-3 " style="width: 25%; border-radius: 0px; padding: 2px 0px; margin: 0px; height: auto; border-left:none; border-top: none; border-bottom: none;">主题</a>
						<a id="depart" data-value="" data-title="目的地" data-type="depart" href="javascript:;" class="col-xs-3 " style="width: 25%; border-radius: 0px; padding: 2px 0px; margin: 0px; height: auto; border-left:none; border-top: none; border-bottom: none;">从哪</a>
						<a id="dest" data-value="" data-title="出发城市" data-type="dest" href="javascript:;" class="col-xs-3 " style="width: 25%; border-radius: 0px; padding: 2px 0px; margin: 0px; height: auto; border-left:none; border-top: none; border-bottom: none;">去哪</a>
						<a id="start" data-value="" data-title="出发时间" data-type="start" href="javascript:;" class="col-xs-3 " style="width: 25%; border-radius: 0px; padding: 2px 0px; margin: 0px; height: auto; border: none;">何时</a>
						<a id="time" data-value="" data-title="旅游时间" data-type="time" href="javascript:;" class="col-xs-3 " style="display: none;">多久</a>
					</nav>
					<div class="clearfix tooltip-arrowbox wx_arrow_box" style="display: none; position: relative; z-index: 1 !important">
						<a href="javascript:;" class="col-xs-3 t">
							<div class="tooltip-arrow  arrow_01"></div>
						</a>
						<a href="javascript:;" class="col-xs-3 t">
							<div class="tooltip-arrow "></div>
						</a>
						<a href="javascript:;" class="col-xs-3 t">
							<div class="tooltip-arrow "></div>
						</a>
						<a href="javascript:;" class="col-xs-3 t">
							<div class="tooltip-arrow "></div>
						</a>
						<a href="javascript:;" class="col-xs-3 t">
							<div class="tooltip-arrow "></div>
						</a>
					</div>
					<div data-type="theme" id="theme-wrapper" class="theme category-wrapper nekoAnim-animated nekoAnim-fadeInDown clearfix menuType" style="display: none">
						<ul class="category clearfix">
							<li data-value="all" class="active">全部</li>
							<s:if test="productCategoryVOList != null && productCategoryVOList.size() > 0">
								<s:iterator value="productCategoryVOList" var="productCategoryVO" status="countIdx">
									<li data-value="<s:property value='#productCategoryVO.productCategoryModel.id' />"><s:property value='#productCategoryVO.productCategoryModel.name' /></li>
								</s:iterator>
							</s:if>
						</ul>
						<div class="category_btn pull-right clearfix sure">
							<button class="btn" type="button">确定</button>
						</div>
					</div>
					<div data-type="depart" id="depart-wrapper" class=" depart category-wrapper nekoAnim-animated nekoAnim-fadeInDown clearfix menuType" style="display: none">
						<ul class="category clearfix">
							<li data-value="all" class="active">全部</li>
							<s:if test="departureVOList != null && departureVOList.size() > 0">
								<s:iterator value="departureVOList" var="departureVO" status="countIdx">
									<li data-value="<s:property value='#departureVO.departureModel.name' />"><s:property value='#departureVO.departureModel.name' /></li>
								</s:iterator>
							</s:if>
						</ul>
						<div class="category_btn pull-right clearfix sure">
							<button class="btn" type="button">确定</button>
						</div>

					</div>
					<div data-type="dest" id="dest-wrapper" class="dest category-wrapper nekoAnim-animated nekoAnim-fadeInDown clearfix menuType" style="display: none">
						<ul class="category clearfix">
							<li data-value="all" class="active">全部</li>
							<s:if test="destinationVOList != null && destinationVOList.size() > 0">
								<s:iterator value="destinationVOList" var="destinationVO" status="countIdx">
									<li data-value="<s:property value='#destinationVO.destinationModel.name' />"><s:property value='#destinationVO.destinationModel.name' /></li>
								</s:iterator>
							</s:if>
						</ul>
						<div class="category_btn pull-right clearfix sure">
							<button class="btn" type="button">确定</button>
						</div>

					</div>
					<div data-type="start" id="start-wrapper" class=" start category-wrapper nekoAnim-animated nekoAnim-fadeInDown  clearfix menuType" style="display: none">
						<ul class="category clearfix">
							<li data-value="all" class="active">全部</li>
							<s:if test="dateList != null && dateList.size() > 0">
								<s:iterator value="dateList" var="date" status="countIdx">
									<li data-value="<s:property value='#date' />"><s:property value='#date' /></li>
								</s:iterator>
							</s:if>
						</ul>
						<div class="category_btn pull-right clearfix sure">
							<button class="btn" type="button">确定</button>
						</div>

					</div>
					<div data-type="time" id="time-wrapper" class=" time category-wrapper nekoAnim-animated nekoAnim-fadeInDown  clearfix menuType" style="display: none">
						<ul class="category clearfix">
							<li data-value="all" class="active">全部</li>
							<li data-value="1">一天</li>
							<li data-value="2">二天</li>
							<li data-value="3">三天</li>
							<li data-value="4">四天</li>
							<li data-value="5">五天</li>
							<li data-value="6">六天</li>
							<li data-value="7">七天</li>
							<li data-value="8">八天</li>
						</ul>
						<div class="category_btn pull-right clearfix sure">
							<button class="btn" type="button">确定</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="indexContent" class="row" style="">
		<s:if test="productVOList != null && productVOList.size() > 0">
			<s:iterator value="productVOList" var="productVO" status="countIdx">
				
				<div <s:if test="#countIdx.index == 0">style="margin-top: 50px"</s:if> onclick="goProductDetail('<s:property value="#productVO.productModel.id" />');">
					<div class="panel-heading padding_10">
						<div class="individual_center synchysis_box clearfix" style="width: 100%; padding: 5px 10px;">
							<a class="media-left pull-left" style="width: 33%;">
								<div class="front_image_tag">
									<s:if test='#productVO.productTags != null && #productVO.productTags.size() > 0'>
										<s:iterator value="#productVO.productTags" var="productTagItem">
											<s:if test='#productTagItem.tagModel.mdisplayInfo == 0'>
												<s:property value="#productTagItem.tagModel.name" />
											</s:if>
										</s:iterator>
									</s:if>
								</div>
								<img alt="60x60" data-src="" style="width: 100%; border-radius:10px;"
									src="<s:if test='#productVO.productModel.image != null'><s:property value='#productVO.productModel.image' /></s:if><s:else>resources/travel/weixin/images/individual_smallimg.jpg</s:else>" data-holder-rendered="true" class="img-rounded">
							</a>
							<div class="media-body evaluation_left displayinline" style="float: right;width: 66%;">
								<h4 class="media-heading username color-write">
									<dl class="clearfix individual_dl"><!--class="individualtitle" -->
										<dt class="dt_product_name" style="font-weight: bold;">
											<s:if test="#productVO.productModel.name != null && #productVO.productModel.name.length() > 25">
												<s:property value='#productVO.productModel.name.substring(0, 25)' />...
											</s:if>
											<s:else>
												<s:property value='#productVO.productModel.name' />
											</s:else>
										</dt>
										<dt class="dt_product_startingDate">
											出发日期&nbsp;&nbsp;
											<s:if test="#productVO.productModel.startingDate != null && #productVO.productModel.startingDate.length() > 21 ">
												<s:property value='#productVO.productModel.startingDate.substring(0, 21)' />...
											</s:if>
											<s:else>
												<s:property value='#productVO.productModel.startingDate' />
											</s:else>
										</dt>
										<dt class="dt_product_startAddress"><s:property value='#productVO.productModel.startAddress' />出发</dt>
										<dt class="dt_product_tag">
											<s:if test='#productVO.productTags != null && #productVO.productTags.size() > 0'>
												<s:iterator value="#productVO.productTags" var="productTagItem">
													<s:if test='#productTagItem.tagModel.mdisplayInfo == 1'>
														<span class="desc_tag"><s:property value="#productTagItem.tagModel.name" /></span>
													</s:if>
												</s:iterator>
											</s:if>
										</dt>
										<dt class="dt_product_price"><span style="font-weight: bold;"><s:text name="format.number"><s:param value="#productVO.productModel.price"/></s:text></span><span style="font-size: 0.7em;">元起</span></dt>
									</dl>
								</h4>
							</div>
						</div>
					</div>
				</div>
				
			</s:iterator>
		</s:if>
		</div><!-- end id="indexContent" -->
		<div class="row" style="display: none" id="nofonudDiv">
			<div class="detailloading col-xs-12 col-sm-12  animated fadeInLeftBig center_list wrong">
				<img src="<%=hostConfig.getPortalHost() %>resources/travel/weixin/images/index_toleration.png" class="img-responsive">
				<p class="marked_words">抱歉，没有找到相关产品。</p>
				<p class="marked_words font-sizesmall">Sorry.Related products not found.</p>
				<p>
					<a href="travel/weixin/index.html">
						<button class="btn submit_stroll margin_right0" type="button">去逛逛</button>
					</a>
				</p>
			</div>
		</div>
		<div class="row " style="display: none" id="fengKe">
			<div class="col-sm-6 col-xs-12 padding_0 ">
				<div class=" mixed animated fadeInLeftBig padding_0 clearfix fengke_img">
					<img src="<%=hostConfig.getPortalHost() %>resources/travel/weixin/images/fengke_show.png" class="img-responsive" />
				</div>
			</div>
		</div>

		<form action="" id="conditionForm" style="display: none">
			<input name="pageBean.currentPage" value="1" />
		</form>
		<script type="text/javascript">
	var themes =  new Map(); //主题
	var origins =  new Map(); //出发地
	var dests =  new Map();//目的地
	var starts = new Map(); //开始时间
	var timeCycle = new Map(); //旅游周期时间
	$(function(){
		//data-original
		$("img").lazyload({
			effect: "fadeIn"
		});
		
		$(".t").css("visibility","hidden");
		$("nav a").click(function(){
			var targetId = $(this).attr("id");
			var display = $("."+targetId).css("display");
			$(".curr").removeClass("curr");
			if(display == "none" || typeof(display) =="undefined"){
				allHide();
				$(this).addClass("curr");
				$(".tooltip-arrowbox").children().eq($(this).index()).css("visibility","visible");
				$(".wx_arrow_box").css("display","block");
				$("."+targetId).show();
//				$("body").css("overflow-y","hidden");
	  			//var b = document.documentElement.scrollTop==0? document.body.scrollTop : document.documentElement.scrollTop;
				//$("#indexContent").css("top","-"+b+"px");
				//$("#indexContent").css("position","fixed");
			}else{
				$(this).removeClass("curr");
				$("."+targetId).hide();
				$(".wx_arrow_box").css("display","none");
				$(".wx_arrow_box .t").css("visibility","hidden");
				//$("#indexContent").css("position","relative");
			}
		});
		
		//条件筛选
		$(".category li").click(function(){
			var val = $(this).data("value");
			//标签所在的分类
			var mapType = $(this).closest("div").data("type");
			if(val!="all" && val!="submit" && val !="cancle"){
				//点击了某个条件标签
				if($(this).hasClass("active")){
					$(this).removeClass("active");
					oprate("delete",val,val,mapType);
					var cancleAll = true;
					$(this).siblings().each(function(){
						if($(this).hasClass("active")){
							cancleAll = false;
						}
					});
					if(cancleAll){
						$(this).siblings().eq(0).addClass("active");
					}
				}else{
					$(this).parent().children().eq(0).removeClass("active");
					$(this).addClass("active");
					oprate("add",val,val,mapType);
				}
			}else if(val=="all"){
				//点击了全部标签
				$(this).addClass("active");
				$(this).parent().children().each(function(i){
					if(i!=0){
						$(this).removeClass("active");
					}
				});
				oprate("deleteAll",val,val,mapType);
			}else if(val == "submit"){
				//提交后台请求
				allHide();
				setData();
				query();
			}else if (val == "cancle"){
				allHide();
				setData();
				query();
			}
		});
		
		$(".sure").click(function(){
			//提交后台请求
			allHide();
			setData();
			query();
		});
		
		$('#indexContent').find('img').each(function() {
			$(this).css('height', $(this).css('width'));
		});
		
	});
	
	function allHide(){
		$(".wx_arrow_box").css("display","none");
		$(".wx_arrow_box .t").css("visibility","hidden");
		$(".menuType").css("display","none");
		$(".menuType").css("opacity","0");
		$(".list_group a").removeClass("curr");
	}
	
	function allHideDealy(){
			$(".list_group a").removeClass("curr");
			$(".menuType:visible").css("display","none");
			$(".wx_arrow_box").css("display","none");
			$(".wx_arrow_box .t").css("visibility","hidden");
	}
	//根据不同类别操作相应的map
	function oprate(type,key,val,mapType){
		var map = new Map();
		if(mapType == "theme"){
			map = themes;
		}else if(mapType == "depart"){
			map = origins;
		}else if(mapType == "dest"){
			map = dests;
		}else if(mapType == "start"){
			map = starts;
		}else if(mapType == "time"){
			map = timeCycle;
		}
		
		if(type == "add"){
			map.put(key , val);
		}else if(type == "delete"){
			map.remove(key);
		}else if(type == "deleteAll"){
			map.removeAll();
		}
	}
	
	function query(){
		window.scrollTo(0,0);
		$("#nofonudDiv").hide();
		$.ajax({
			url: "<%=hostConfig.getPortalHost() %>travel/weixin/ajaxProduct.action?productVO.productModel.mproductType=0",
			type: "GET",
			data : $("#conditionForm").serialize(),
			dataType: "html",
			cache: false,
			success: function(data) {
				finsh = false;
				$("#indexContent").empty();
				if($.trim(data) != ''){
					$("#indexContent").append(data);
				}
				$(".top_point").slideUp();
				$(".travel_nav").animate({top:"0px"});
				
				page = 1;
			},
			error:function(){
				$("#indexContent").empty();
				$(".top_point").slideUp();
				$(".travel_nav").animate({top:"0px"});
				$(".top_point").find("i").text("未找到满足条件的产品");
				$("#nofonudDiv").show();
			}
		});
	}
	
	function setData(){
		$("#conditionForm").empty();
		
		var categoryStr = '';
		var categoryList = $('#theme-wrapper').find('li[class=active]');
		if(categoryList != null) {
			for(var i = 0; i < categoryList.length; i ++) {
				var title = $.trim($(categoryList[i]).data("value"));
				if(title != '' && title != 'all') {
					if(categoryStr.length > 0) {
						categoryStr += ',';
					}
					categoryStr += title;
				}
			}
		}
		$("#conditionForm").append("<input name = 'categorys' value='" + categoryStr + "'/>");
		
		var originStr = '';
		var originList = $('#depart-wrapper').find('li[class=active]');
		for (var i = 0; i < originList.length; i++) {
			var title = $.trim($(originList[i]).data("value"));
			if(title != '' && title != 'all') {
				if(originStr.length > 0) {
					originStr += ',';
				}
				originStr += title;
			}
		}
		$("#conditionForm").append("<input name = 'origins' value='"+originStr+"'/>");
		
		var destStr = '';
		var destList = $('#dest-wrapper').find('li[class=active]');
		for (var i = 0; i < destList.length; i++) {
			var title = $.trim($(destList[i]).data("value"));
			if(title != '' && title != 'all') {
				if(destStr.length > 0) {
					destStr += ',';
				}
				destStr += title;
			}
		}
		$("#conditionForm").append("<input name = 'dests' value='"+destStr+"'/>");
		
		var startStr = '';
		var startList = $('#start-wrapper').find('li[class=active]');
		for (var i = 0, keys = starts.keySet(), len = keys.length; i < len; i++) {
			var title = $.trim($(startList[i]).data("value"));
			if(title != '' && title != 'all') {
				if(startStr.length > 0) {
					startStr += ',';
				}
				startStr += title;
			}
		}
		$("#conditionForm").append("<input name = 'starts' value='" + startStr + "'/>");
		
		var page = "<input name = 'pageBean.currentPage' value='1' />";
		$("#conditionForm").append($(page));
	}
	
	function goProductDetail(productId){
		if($("#theme-wrapper").css("display") == "none" && $("#dest-wrapper").css("display") == "none"
				&& $("#start-wrapper").css("display") == "none" && $("#depart-wrapper").css("display") == "none"
				&& $("#time-wrapper").css("display") == "none"){
			window.location.href = '<%=hostConfig.getPortalHost() %>travel/weixin/product/' + productId + '.html';
		}else{
			allHideDealy();
			$("body").css("overflow-y","auto");
		}
	}
	
	function Map(){
		this.container = new Object();
	}

	Map.prototype.put = function(key, value){
		this.container[key] = value;
	}

	Map.prototype.get = function(key){
		return this.container[key];
	}

	Map.prototype.keySet = function() {
		var keyset = new Array();
		var count = 0;
		for (var key in this.container) {
		// 跳过object的extend函数
			if (key == 'extend') {
				continue;
			}
			keyset[count] = key;
			count++;
		}
		return keyset;
	}

	Map.prototype.size = function() {
	var count = 0;
		for (var key in this.container) {
			// 跳过object的extend函数
			if (key == 'extend'){
				continue;
			}
			count++;
		}
		return count;
	}

	Map.prototype.remove = function(key) {
		delete this.container[key];
	}
	
	Map.prototype.removeAll = function() {
		for (var i = 0, keys = this.keySet(), len = keys.length; i < len; i++) {
			delete this.container[ keys[i]];
		}
	}

	Map.prototype.toString = function(){
		var str = "";
		for (var i = 0, keys = this.keySet(), len = keys.length; i < len; i++) {
			str = str + keys[i] + "=" + this.container[keys[i]] + ";\n";
		}
		return str;
	} 
	
	Map.prototype.toJson = function(){
		var str = "";
		for (var i = 0, keys = this.keySet(), len = keys.length; i < len; i++) {
			str = str + keys[i] + ":" + this.container[keys[i]] + ",";
		}
		return str.substring(0, str.length-1);
	} 
	var page = 1;
	var loading = false; //判断是否正在加载
	var finsh = false; //判断是否还有数据
	$('#indexContent').scrollPagination({
		'contentPage': "<%=hostConfig.getPortalHost() %>travel/weixin/ajaxProduct.action?productVO.productModel.mproductType=0", 
		'contentData': {}, 
		'dataForm': "#conditionForm", 
		'scrollTarget': $(window), 
		'heightOffset': 10,
		'beforeLoad': function(){
			
		},
		'afterLoad': function(){
			if(finsh){
				$("#finsh").show();
				$("#loading").hide();
			}else if(loading){
			}else{
				$("#loading").show();
				$("#conditionForm").find('input[name="pageBean.currentPage"]').val(++page);
				loading = true; //这个加载中
				$.ajax({
					  type: 'GET',
					  data:$("#conditionForm").serialize(),
					  url: "travel/weixin/ajaxProduct.action?productVO.productModel.mproductType=0",
					  dataType: "html",
					  async:false,
					  success: function(data){
						   if($.trim(data) == ''){
								finsh = true; //数据此次已经全部加载完毕
								$("#loading").hide();
								return;
							}
							loading = false;
							$("#indexContent").append(data);
							//$("#loading").hide();
							$("img").lazyload({
								threshold: 200,
								effect: "fadeIn"
							});
						    loading = false; //加载完成
					  }
				  });
			}
		}
	});
	
	function goUserIndex(){
		window.location.href = "travel/weixin/user/index.html";
	}
</script>
	<!--首页加载-->
		<div class="row" style="display: none">
			<div class="pullloading col-xs-12 col-sm-12 padding_10">
				<img src="resources/travel/weixin/images/productupload.png" class="img-responsive" />
			</div>
		</div>
	<!--首页加载-->
	<!--进入详情页时加载-->
		<div class="row"  id="loading">
			<div class="detailloading col-xs-12 col-sm-12 padding_10">
				<img src="resources/travel/weixin/images/loading.gif" class="img-responsive" />
			</div>
		</div>
		<div class="row" style="display: none" id="finsh">
			<div class="detailloading col-xs-12 col-sm-12 padding_10">
				<img src="resources/travel/weixin/images/finsh.png" class="img-responsive" />
			</div>
		</div>
	<!-- 进入详情页时加载 -->
	<div id="topcontrol" title="Scroll Back to Top" style="position: fixed; bottom: 4em; right: 0.5em; opacity: 1; cursor: pointer;">
		<div class="usercenter_ico" onClick="goUserIndex()">
			<a href="travel/weixin/user/index.html" class="usercenter-back"></a>
		</div>
	</div>
</div>
</body>
</html>